<template>
  <div class="body-box">
    <!-- 第三行数据 -->
    <div class="content-boxcc">
      <!-- <div class="one">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">实时车辆在线统计 </span>
            </div>
          </div>

          <div id="WorkOnStandard_VZ" style="width: 98%; height: 135px"></div>
        </dv-border-box-7>
      </div> -->
      <div class="two">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">人员实时在线率 </span>
            </div>
          </div>

          <div id="WorkOnStandard_DW" style="width: 98%; height: 135px"></div>
        </dv-border-box-7>
      </div>
      <div class="three">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">昨日全市报警前四名</span>
            </div>
          </div>
          <el-table :data="tableData" border style="width: 430px; margin: 10px">
            <el-table-column prop="date" label="排名"> </el-table-column>
            <el-table-column prop="name" label="车牌照号" width="180">
            </el-table-column>
            <el-table-column prop="pm" label="次数"> </el-table-column>
          </el-table>
          <!-- <div id="WorkOnStandard_DB" style="width: 98%; height: 135px"></div> -->
        </dv-border-box-7>
      </div>
      <!-- <div class="four">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">各街道车辆实时在线百分比</span>
            </div>
          </div>
          <div id="WorkOnStandard_GZ" style="width: 98%; height: 135px"></div>
        </dv-border-box-7>
      </div> -->
      <div class="five">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">当日各模块出动情况</span>
            </div>
          </div>
          <!-- <div
                  id="WorkRatioByCartype"
                  style="width: 98%; height: 135px"
                ></div> -->
          <div id="WorkOnStandard_VC" style="width: 98%; height: 135px"></div>
        </dv-border-box-7>
      </div>
      <div class="six">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2"
                >{{
                this.changeOperationName
              }}</span
              >
            </div>
          </div>
          <el-button-group style="position: absolute; right: 25%; z-index: 99">
            <el-button
              round
              type="primary"
              v-for="(item, index) in mapOperationsSummary"
              size="mini"
              :key="index"
              @click="changeOperationSummaryValue(index)"
              >{{ item.name }}
            </el-button>
          </el-button-group>
          <div :id="this.changeOperationValue" style="width: 98%; height: 310px"></div>
        </dv-border-box-7>
      </div>
      <div class="seven">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2"
                >昨日垃圾分类开展情况</span
              >
            </div>
          </div>

          <div id="WorkOnStandard_SS" style="width: 98%; height: 135px"></div>
        </dv-border-box-7>
      </div>
      <div class="eight">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2"
                >昨日全市违规作业前四名
              </span>
            </div>
          </div>

          <el-table :data="tableData" border style="width: 430px; margin: 10px">
            <el-table-column prop="date" label="排名"> </el-table-column>
            <el-table-column prop="name" label="车牌照号" width="180">
            </el-table-column>
            <el-table-column prop="pm" label="次数"> </el-table-column>
          </el-table>
          <!-- <div id="WorkOnStandard_GC" style="width: 98%; height: 135px"></div> -->
        </dv-border-box-7>
      </div>
      <div class="nine">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">昨日各模块覆盖率 </span>
            </div>
          </div>

          <div id="WorkOnStandard_VX" style="width: 98%; height: 135px"></div>
        </dv-border-box-7>
      </div>
      <div class="ten">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">当日各类型处理厂处理量 </span>
            </div>
          </div>

          <div id="WorkOnStandard_GX" style="width: 98%; height: 135px"></div>
        </dv-border-box-7>
      </div>
      <div class="eleven">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2"
                >车辆实时在线率</span
              >
            </div>
          </div>

          <div id="WorkOnStandard_JS" style="width: 98%; height: 135px"></div>
        </dv-border-box-7>
      </div>
      <div class="twelve">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2"
                >{{
                this.changeOperationName2
              }}
              </span>
            </div>
          </div>

          <el-button-group style="position: absolute; right: 31%; z-index: 99">
            <el-button
              round
              type="primary"
              v-for="(item, index) in mapOperationsSummary2"
              size="mini"
              :key="index"
              @click="changeOperationSummaryValue2(index)"
              >{{ item.name }}
            </el-button>
          </el-button-group>
          <div :id="this.changeOperationValue2" style="width: 98%; height: 310px"></div>
        </dv-border-box-7>
      </div>

      <div class="thirteen">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div style="width: 100%; height: 140px">
            <el-row :gutter="12" style="margin: 0.2% 0">
              <el-col :span="2">
                <el-card shadow="always">
                  <div class="ht">垃圾点数</div>
                  <div class="hd">623</div>
                </el-card>
              </el-col>
              <el-col :span="2">
                <el-card shadow="always">
                  <div class="ht">当日作业趟次</div>
                  <div class="hd">900</div>
                </el-card>
              </el-col>
              <el-col :span="2">
                <el-card shadow="always">
                  <div class="ht">处理厂总数</div>
                  <div class="hd">48</div>
                </el-card>
              </el-col>
              <el-col :span="2">
                <el-card shadow="always">
                  <div class="ht">当日过磅趟次</div>
                  <div class="hd">22</div>
                </el-card>
              </el-col>
              <el-col :span="2">
                <el-card shadow="always">
                  <div class="ht">中转站总数</div>
                  <div class="hd">47</div>
                </el-card>
              </el-col>
            <!-- </el-row>
            <el-row :gutter="12" style="margin: 2% 0"> -->
              <el-col :span="2">
                <el-card shadow="always">
                  <div class="ht">当日作业趟次</div>
                  <div class="hd">90</div>
                </el-card>
              </el-col>
              <el-col :span="2">
                <el-card shadow="always">
                  <div class="ht">公厕数</div>
                  <div class="hd">1056</div>
                </el-card>
              </el-col>
              <el-col :span="2">
                <el-card shadow="always">
                  <div class="ht">当日客流量</div>
                  <div class="hd">2103</div>
                </el-card>
              </el-col>
              <el-col :span="2">
                <el-card shadow="always">
                  <div class="ht">扫保班组数</div>
                  <div class="hd">1047</div>
                </el-card>
              </el-col>
            <!-- </el-row>
            <el-row :gutter="12" style="margin: 2% 0"> -->
              <el-col :span="2">
                <el-card shadow="always">
                  <div class="ht">扫保人员数</div>
                  <div class="hd">2523</div>
                </el-card>
              </el-col>
              <el-col :span="2">
                <el-card shadow="always">
                  <div class="ht">区域数量</div>
                  <div class="hd">623</div>
                </el-card>
              </el-col>
              <el-col :span="2">
                <el-card shadow="always">
                  <div class="ht">道路数量</div>
                  <div class="hd">900</div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </dv-border-box-7>
      </div>
      <!-- <div class="thirteen">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >车均报警次数情况统计
                    </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_VB"
                  style="width: 98%; height: 135px"
                ></div>
              </dv-border-box-7>
            </div> -->
      <!-- <div class="fourteen">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
                    <span class="fs-xl text mx-2"
                      >各街道车均报警次数百分比
                    </span>
                  </div>
                </div>

                <div
                  id="WorkOnStandard_GB"
                  style="width: 98%; height: 135px"
                ></div>
              </dv-border-box-7>
            </div> -->
    </div>
  </div>
</template>

<script>
import { optionWorkOnStandardH } from '@/components/echart/bar.js'
import { optionWorkOnStandard1 } from '@/components/echart/bar.js'
// import { optionWorkOnStandard2 } from '@/components/echart/bar.js'
import { collectionRate } from '@/components/echart/bar.js'
import { collectionRate3 } from '@/components/echart/bar.js'
// import { incomingQuantity } from '@/components/echart/bar.js'
import { spotsNumbe } from '@/components/echart/bar.js'
import { spotsNumbe2 } from '@/components/echart/bar.js'
// import { brokenLine } from '@/components/echart/bar.js'
import { optionBarContainBarAndRatio } from '@/components/echart/bar.js'
import drawMixin from "../utils/drawMixin";
import { formatTime } from '../utils/index.js'
import { formatDate } from '@/common/js/date.js'
import * as echarts from 'echarts';
export default {
  mixins: [drawMixin],
  data () {
    return {
      ClientNo: '00000',
      nowDate: formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24), 'yyyy-MM-dd'),
      radio1: '上海',
      form: {
        userName: 'dlhw',
        date: '2020-10',
        clientNo: '00000',
        vehicleData: [{
          排队数: '0',
          车辆总数: '0',
          出动数: '0',
          出动率: '0',
        }],
      },
      MapV: {
        iconLayerDic: {},
        textLayerDic: {},
        dataSetDic: {},
        VIcon_Installations: {},
        VText_Installations: {},
      },
      Data: {
        arrayForType_Rubbish: [],
        arrayCLCPolygonData: [],
        arrayCLCMarkerData: [],
        arrayZZZMarkerData: [],
        arrayNCDMarkerData: [],
        arrayXQCYMarkerData: [],
        arrayCYMarkerData: [],
      },
      changeOperationName: "昨日各区道路机扫出勤率",
      changeOperationValue: "WorkOnStandard_VE",
      mapOperationsSummary: [

        {
          name: "道路机扫",
          icon: "el-icon-house",
        },
        {
          name: "垃圾收运",
          icon: "el-icon-house",
        },
        {
          name: "人工保洁",
          icon: "el-icon-house",
        },
        {
          name: "公厕维保",
          icon: "el-icon-house",
        }
      ],
      changeOperationName2: "昨日各区道路机扫覆盖率",
      changeOperationValue2: "WorkOnStandard_VE2",
      mapOperationsSummary2: [
        {
          name: "道路机扫",
          icon: "el-icon-house",
        },
        {
          name: "垃圾收运",
          icon: "el-icon-house",
        },
        {
          name: "人工保洁",
          icon: "el-icon-house",
        },
        {
          name: "公厕维保",
          icon: "el-icon-house",
        }
      ],
      isZoomChange: 'S',
      map: null,
      mapZoom: 16,
      timing: null,
      loading: false,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      tableData: [{
        date: '1',
        name: '华明津C21523',
        evaluate: '优秀',
        pm: '5'
      }, {
        date: '2',
        name: '华明津C21523',
        evaluate: '优秀',
        pm: '8'
      }, {
        date: '3',
        name: '华明津C21523',
        evaluate: '优秀',
        pm: '10'
      }, {
        date: '4',
        name: '华明津C21523',
        evaluate: '优秀',
        pm: '11'
      }]
    }
  },
  components: {
    // centerLeft1,
    // centerLeft2,
    // centerRight1,
    // centerRight2,
    // center,
    // bottomLeft,
    // bottomRight
  },
  mounted () {
    // this.ClientNo = localStorage.getItem('ClientNo');
    this.initWorkOnStandard_SS()
    this.initWorkOnStandard_CX()
    this.initWorkOnStandard_XS()
    this.initWorkOnStandard_JS()
    this.initWorkOnStandard_VZ()
    this.initWorkOnStandard_DW()
    this.initWorkOnStandard_DB()
    this.initWorkOnStandard_GZ()
    this.initWorkOnStandard_GC()
    this.initWorkOnStandard_VC()
    this.initWorkOnStandard_VX()
    this.initWorkOnStandard_GX()
    this.initWorkOnStandard_VB()
    this.initWorkOnStandard_GB()

    this.initWorkOnStandard_VE()
    this.initWorkOnStandard_RB()
    this.initWorkOnStandard_WO()
    this.initWorkOnStandard_WC()
    this.initWorkOnStandard_VE2()
    this.initWorkOnStandard_RB2()
    this.initWorkOnStandard_WO2()
    this.initWorkOnStandard_WC2()

    this.initWorkRatioByCartype()
    this.timeFn()
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {
    // 昨日各类型餐饮单位收运数量及覆盖率格式
    async initWorkRatioByCartype () {
      // [{"GROUPNAME":null,"CAR_TYPE":"洗路车","ALLNUM":"93","CURRENTNUM":"57"},
      // {"GROUPNAME":null,"CAR_TYPE":"机扫车","ALLNUM":"27","CURRENTNUM":"17"},
      // {"GROUPNAME":null,"CAR_TYPE":"高压清洗车","ALLNUM":"41","CURRENTNUM":"12"},
      // {"GROUPNAME":null,"CAR_TYPE":"洒水车","ALLNUM":"55","CURRENTNUM":"16"},
      // {"GROUPNAME":null,"CAR_TYPE":"小型机扫车","ALLNUM":"25","CURRENTNUM":"5"},
      // {"GROUPNAME":null,"CAR_TYPE":"除雪车","ALLNUM":"6","CURRENTNUM":"2"},
      // {"GROUPNAME":null,"CAR_TYPE":"总计","ALLNUM":"247","CURRENTNUM":"104"}]
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkRatioByCartype'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionBarContainBarAndRatio(["覆盖率", "覆盖数", "总数"], {
        category: ["小区", "饭店", "企业"],
        // lineData: [300, 400, 600], barData: [276, 348, 336],
        // rateData: [92, 87, 56,]
      }));
      var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetPointWorkByTypeInfo?CLIENT_NO=" + this.ClientNo;
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: data.rateData
        }, {
          data: data.barData
        }, {
          data: data.lineData
        }]

      });
    },
    // 实时车辆在线统计
    async initWorkOnStandard_VZ () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VZ'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetVehicleOnlineInfo '" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)

      myChart.setOption({
        series: [{
          data: data
        },]
      });
    },
    // 人员实时在线率
    async initWorkOnStandard_DW () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_DW'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      // var url =
      //   "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetWorkerAttendenceRightInfo  '" +
      //   this.nowDate +
      //   "','" +
      //   this.ClientNo +
      //   "'";
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url);
      myChart.setOption({
        series: [
          {
            data: [{"value":33.1,"name":"正点人数：130人"},{"value":66.9,"name":"不正点人数：261人"}],
          },
        ],
      });
    },
    //当日各模块出动情况 
    async initWorkOnStandard_VC () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VC'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandardH());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=dlhw&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',洗扫";
      // const { data } = await this.$Http.get(url)
      myChart.setOption({
        legend: {
          data: ['总数', '在线数量','当日出动数']
        },
        xAxis: {
          data: ["机扫车", "垃圾车", "吸粪车", "保洁人员", "公厕维保人员"]
        },
        series: [{
          name: '总数',
          data: ["100", "96", "97", "42", "81"]
        }, {
          name: '在线数量',
          data: ["19", "25", "34", "16", "37"]
        },{
          name: '当日出动数',
          data: ["19", "25", "34", "16", "37"]
        }]
      });
    },
    // 昨日各模块覆盖率
    async initWorkOnStandard_VX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetT0BarMultipurpose01?sqlName=dlhw&url=exec T_GetRubbishWorkInfo  '" + this.nowDate + "','" + this.ClientNo + "','处理厂'"
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: ["机扫", "公厕", "保洁", "垃圾"]
        },
        yAxis: {
          
        },
        series: [{
          name:'覆盖率',
          data: ["100", "29", "19", "69"]
        }]
      });
    },
    // 车均报警次数情况统计
    async initWorkOnStandard_VB () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VB'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetVehicleAlarmInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: data
        },]
      });
    },
    // 昨日全市报警前五名
    async initWorkOnStandard_DB () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_DB'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetVehicleRoadInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        // legend: {
        //   data: ['津C26292', '津C26292', '津C26292', '津C26292', '津C26292', '津C26292', '津C26292']
        // },
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },
    // 各街道车辆实时在线百分比
    async initWorkOnStandard_GZ () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_GZ'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetVehicleOnlineInfo '" +this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: ["丰年村街", "华明街", "华新街", "开发区", "张贵庄街", "金钟街", "万新街"]
        },
        series: [{

          data: ["20", "15.1", "13", "12.1", "10", "6.7", "2"]
        }]
      });
    },
    //昨日全市违规作业前四名
    async initWorkOnStandard_GC () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_GC'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetVehicleWorkInfo  '" + this.nowDate + "','" +this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: ["丰年村街", "华明街", "华新街", "开发区", "张贵庄街", "金钟街", "万新街"]
        },
        series: [{

          data: ["98", "95.1", "83", "82.1", "80", "76.7", "72"]
        }]
      });
    },
    //当日各类型处理厂处理量
    async initWorkOnStandard_GX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_GX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetT0BarMultipurpose01?sqlName=dlhw&url=exec T_GetRubbishWorkInfo  '" + this.nowDate + "','" + this.ClientNo + "','处理厂'"
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: ["其他垃圾处理厂","厨余垃圾处理厂", "可回收垃圾处理厂","有害垃圾处理厂"]
        },
        yAxis: {
          
        },
        series: [{
          name:'趟次',
          data: ["2020","1020","1170", "239"]
        }]
      });
    },
    //各街道车均报警次数百分比
    async initWorkOnStandard_GB () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_GB'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url = "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetVehicleAlarmInfo  '" + this.nowDate + "','" + this.ClientNo + "'"
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories
        },
        series: [{

          data: data.data
        }]
      });
    },

    timeFn () {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading () {
      setTimeout(() => {
        this.loading = false
        this.initC();
      }, 2000)
    },
    //昨日垃圾分类开展情况
    async initWorkOnStandard_SS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_SS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate3());
      // var url = "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetVehicleWInfo?CLIENT_NO=00000";
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url)

      myChart.setOption({
        // legend:{data:["小区","饭店","企业"]},
        series: [{
          data: [
            { "value": 723, "name": "督导员出动数" },
            { "value": 552, "name": "垃圾投放量 " },
            { "value": 350, "name": "分类设施巡查数" },
            { "value": 350, "name": "投放和设施异常数" },]
        },]
      });
    },
    // 公厕打扫情况概览
    async initWorkOnStandard_CX () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_CX'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandard1());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=dlhw&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',洗扫";
      // const { data } = await this.$Http.get(url)
      myChart.setOption({
        legend: {
          data: ['男厕', '女厕', '驻场', '不驻场']
        },
        xAxis: {
          data: ["2023-1-1", "2023-1-2", "2023-1-3", "2023-1-4", "2023-1-5", "2023-1-6", "2023-1-7"]
        },
        series: [{
          name: '男厕',
          data: ["144", "149", "117", "173", "103", "112", "126"]
        }, {
          name: '驻场',
          data: ["34", "23", "20", "31", "22", "24", "16"]
        }, {
          name: '不驻场',
          data: ["110", "126", "97", "142", "81", "88", "110"]
        }, {
          name: '女厕',
          data: ["94", "109", "217", "127", "203", "178", "169"]
        }, {
          name: '驻场',
          data: ["19", "25", "34", "16", "37", "26", "17"]
        }, {
          name: '不驻场',
          data: ["75", "84", "183", "111", "166", "152", "152"]
        }]
      });
    },
    //昨日各区人/车出勤率
    async initWorkOnStandard_XS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_XS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(optionWorkOnStandardH());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=dlhw&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',洗扫";
      // const { data } = await this.$Http.get(url)
      myChart.setOption({
        xAxis: {
          data: ['一级道路总数：100', '二级道路总数：100', '三级道路总数：100', '四级道路总数：100']
        },
        series: [{
          name: '洗扫作业',
          data: ["2981", "1223", "1453", "3451", "2380", "2767", "1272"]
        }, {
          name: '洒水作业',
          data: ["1198", "1231", "1213", "2131", "1810", "1421", "2132"]
        }, {
          name: '机扫作业',
          data: ["2198", "2523", "2183", "2311", "2380", "1221", "2312"]
        }, {
          name: '冲洗作业',
          data: ["1981", "2112", "1212", "2311", "1212", "2723", "1212"]
        },{
          name: '洗扫达标',
          data: ["2981", "1223", "1453", "3451", "2380", "2767", "1272"]
        }, {
          name: '洒水达标',
          data: ["1198", "1231", "1213", "2131", "1810", "1421", "2132"]
        }, {
          name: '机扫达标',
          data: ["2198", "2523", "2183", "2311", "2380", "1221", "2312"]
        }, {
          name: '冲洗达标',
          data: ["1981", "2112", "1212", "2311", "1212", "2723", "1212"]
        }]
      });
    },
    //车辆实时在线率
    async initWorkOnStandard_JS () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_JS'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      // var url =
      //   "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetWorkerAttendenceRightInfo  '" +
      //   this.nowDate +
      //   "','" +
      //   this.ClientNo +
      //   "'";
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url);
      myChart.setOption({
        series: [
          {
            data: [{"value":55.4,"name":"在线车辆：324辆"},{"value":44.6,"name":"离线车辆：261辆"}],
          },
        ],
      });
    },
    // 昨日各区道路机扫出勤率
    async initWorkOnStandard_VE () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VE'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TA_GetRoadClientWorkInfo '" +this.ClientNo + "'"
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        series: [{
          data: data[1]
        }]
      });
    },
    // 昨日各区垃圾收运出勤率
    async initWorkOnStandard_RB () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_RB'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TA_GetRoadClientWorkInfo '" +this.ClientNo + "'"
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        series: [{
          data: data[1]
        }]
      });
    },
    // 昨日各区人工保洁出勤率
    async initWorkOnStandard_WO () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_WO'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TA_GetRoadClientWorkInfo '" +this.ClientNo + "'"
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        series: [{
          data: data[1]
        }]
      });
    },
    // 昨日各区公厕维保出勤率
    async initWorkOnStandard_WC () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_WC'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TA_GetRoadClientWorkInfo '" +this.ClientNo + "'"
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        series: [{
          data: data[1]
        }]
      });
    },
    // 昨日各区道路机扫覆盖率
    async initWorkOnStandard_VE2 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_VE2'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TA_GetRoadClientWorkInfo '" +this.ClientNo + "'"
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        series: [{
          data: data[1]
        }]
      });
    },
    // 昨日各区垃圾收运覆盖率
    async initWorkOnStandard_RB2 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_RB2'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TA_GetRoadClientWorkInfo '" +this.ClientNo + "'"
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        series: [{
          data: data[1]
        }]
      });
    },
    // 昨日各区人工保洁覆盖率
    async initWorkOnStandard_WO2 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_WO2'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TA_GetRoadClientWorkInfo '" +this.ClientNo + "'"
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        series: [{
          data: data[1]
        }]
      });
    },
    // 昨日各区公厕维保覆盖率
    async initWorkOnStandard_WC2 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('WorkOnStandard_WC2'));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url = "http://111.160.78.62:9935/api/ECharts/GetDictionaryBarInfo?row0=0&column0=1&sqlName=&url=EXEC TA_GetRoadClientWorkInfo '" +this.ClientNo + "'"
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data[0]
        },
        series: [{
          data: data[1]
        }]
      });
    },
    changeOperationSummaryValue (index) {
      switch (index) {
        case 0:
          {
            this.changeOperationValue = "WorkOnStandard_VE";
            this.changeOperationName = "昨日各区道路机扫出勤率";
          }
          break;
        case 1:
          {
            this.changeOperationValue = "WorkOnStandard_RB";
            this.changeOperationName = "昨日各区垃圾收运出勤率";
          }
          break;
        case 2:
          {
            this.changeOperationValue = "WorkOnStandard_WO";
            this.changeOperationName = "昨日各区人工保洁出勤率";
          }
          break;
        case 3:
          {
            this.changeOperationValue = "WorkOnStandard_WC";
            this.changeOperationName = "昨日各区公厕维保出勤率";
          }
          break;
      }
      setTimeout(() => {
        this.changeOperationSummary(index);
      }, 50);
    },
    changeOperationSummary (index) {
      switch (index) {
        case 0:
          {
            this.initWorkOnStandard_VE();
            this.changeOperationName = "昨日各区道路机扫出勤率";
          }
          break;

        case 1:
          {
            this.initWorkOnStandard_RB();
            this.changeOperationName = "昨日各区垃圾收运出勤率";
          }
          break;
        case 2:
          {
            this.initWorkOnStandard_WO();
            this.changeOperationName = "昨日各区人工保洁出勤率";
          }
          break;
        case 3:
          {
            this.initWorkOnStandard_WC();
            this.changeOperationName = "昨日各区公厕维保出勤率";
          }
          break;
      }
    },
    changeOperationSummaryValue2 (index) {
      switch (index) {
        case 0:
          {
            this.changeOperationValue2 = "WorkOnStandard_VB2";
          }
          break;
        case 1:
          {
            this.changeOperationValue2 = "WorkOnStandard_RB2";
          }
          break;
        case 2:
          {
            this.changeOperationValue2 = "WorkOnStandard_WO2";
          }
          break;
        case 3:
          {
            this.changeOperationValue2 = "WorkOnStandard_WC2";
          }
          break;
      }
      setTimeout(() => {
        this.changeOperationSummary2(index);
      }, 50);
    },
    changeOperationSummary2 (index) {
      switch (index) {
        case 0:
          {
            this.initWorkOnStandard_VE2();
            this.changeOperationName2 = "昨日各区道路机扫覆盖率";
          }
          break;

        case 1:
          {
            this.initWorkOnStandard_RB2();
            this.changeOperationName2 = "昨日各区垃圾收运覆盖率";
          }
          break;
        case 2:
          {
            this.initWorkOnStandard_WO2();
            this.changeOperationName2 = "昨日各区人工保洁覆盖率";
          }
          break;
        case 3:
          {
            this.initWorkOnStandard_WC2();
            this.changeOperationName2 = "昨日各区公厕维保覆盖率";
          }
          break;
      }
    },
  }
}
</script>

<style lang="scss">
@import '../assets/scss/index.scss';
//下方区域的布局
.content-boxcc {
  grid-auto-flow: row dense;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  // grid-template-rows: repeat(8, 12%);
  grid-template-rows: 12% 22% 22% 22% 22%;
  grid-template-areas:
    'thirteen thirteen thirteen thirteen'
    'eleven six six three'
    'two six six eight'
    'nine twelve twelve seven'
    'five twelve twelve ten'

    
}
.one {
  margin: 5px;
  grid-area: one;
  background: rgba(8, 48, 74, 0.5);
}

.two {
  margin: 5px;
  grid-area: two;
  background: rgba(8, 48, 74, 0.5);
  // grid-row-start: span 2;
}
.three {
  margin: 5px;
  grid-area: three;
  background: rgba(8, 48, 74, 0.5);
}
.four {
  margin: 5px;
  grid-area: four;
  background: rgba(8, 48, 74, 0.5);
}
.five {
  margin: 5px;
  grid-area: five;
  background: rgba(8, 48, 74, 0.5);
}
.six {
  margin: 5px;
  grid-area: six;
  background: rgba(8, 48, 74, 0.5);
}
.seven {
  margin: 5px;
  grid-area: seven;
  background: rgba(8, 48, 74, 0.5);
}
.eight {
  margin: 5px;
  grid-area: eight;
  background: rgba(8, 48, 74, 0.5);
}
.nine {
  margin: 5px;
  grid-area: nine;
  background: rgba(8, 48, 74, 0.5);
}
.ten {
  margin: 5px;
  grid-area: ten;
  background: rgba(8, 48, 74, 0.5);
}
.eleven {
  margin: 5px;
  grid-area: eleven;
  background: rgba(8, 48, 74, 0.5);
}
.twelve {
  margin: 5px;
  grid-area: twelve;
  background: rgba(8, 48, 74, 0.5);
}
.thirteen {
  margin: 5px;
  grid-area: thirteen;
  background: rgba(8, 48, 74, 0.5);
}
.fourteen {
  margin: 5px;
  grid-area: fourteen;
  background: rgba(8, 48, 74, 0.5);
}
// 底部数据
.bototm-box {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 50%);
}
.title {
  padding-top: 10px;
  padding-left: 20px;
  .text {
    font-size: 15px;
    color: #fff;
  }
}
.title-text {
  font-family: 'SimHei';
  font-weight: bold;
}
</style>
